<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>


<div id="app">

</div>


<script>

    // template:"   <div>" +
    // "        <h1>学生信息展示</h1>" +
    // "        <h3>姓名:张三</h3>" +
    // "        <h3>年龄:20</h3>" +
    // "    </div>"

    let vm = new Vue({
        template:`<div>
                    <h1>学生信息展示</h1>
                    <h3>姓名:张三</h3>
                    <h3>年龄:20</h3>
                </div>`
    })

    vm.$mount("#app")


    /*
    * template配置项：
    *     1.  使用字符串形式编写模板内容  没有代码提示
    *     2.  模板比较复杂时 需要进行字符串拼接
    *     3.  页面的结构代码需要包含在一个根标签中
    *
    *     解决方案：
    *       js中的模板语法实现页面结构的编写   反引号
    *
    * */
</script>
</body>
</html>